<template>
  <div class="csg-table">
    <div class="csg-table__header">
      <div class="csg-table__header__search">
        <div v-for="(item, index) in searchDataList" :key="index">
          <!-- 输入框类型 -->
          <div
            v-if="item.type === 'input'"
            class="csg-table__header__search__cell"
          >
            <span :style="{ width: item.labelWidth }">{{ item.label }}：</span>
            <csg-search></csg-search>
          </div>
          <!-- 下拉选择类型 -->
          <div
            v-if="item.type === 'select'"
            class="csg-table__header__search__cell"
          >
            <span>状态：</span>
            <csg-select></csg-select>
          </div>
          <!-- 时间选择类型 -->
          <div
            v-if="item.type === 'date'"
            class="csg-table__header__search__cell"
          >
            <span>时间：</span>
            <csg-date></csg-date>
          </div>
        </div>

        <!-- 查询 按钮 -->
        <div class="csg-table__header__search__action">
          <csg-button>查询</csg-button>
        </div>
        <div class="csg-table__header__search__action">
          <csg-button>重置</csg-button>
        </div>
      </div>
    </div>
    <div class="csg-table__use">
      <div class="csg-table__use__left">
        <csg-button
          :prefixIcon="'icon-descending'"
          class="csg-table__use__left__cell"
          :size="'large'"
          @click="showAdd"
          >新增</csg-button
        >
        <csg-button
          :prefixIcon="'icon-product-filter'"
          class="csg-table__use__left__cell"
          :size="'large'"
          >导入</csg-button
        >
        <csg-button
          :prefixIcon="'icon-response-fill'"
          class="csg-table__use__left__cell"
          :size="'large'"
          >导出</csg-button
        >
      </div>
      <div class="csg-table__use__right">
        <span class="csg-table__use__right__cell iconfont icon-ditie"></span>
        <span class="csg-table__use__right__cell iconfont icon-ditie"></span>
        <span class="csg-table__use__right__cell iconfont icon-ditie"></span>
        <span class="csg-table__use__right__cell iconfont icon-ditie"></span>
      </div>
    </div>
    <div class="csg-table__body">
      <table>
        <thead class="csg-table__body__thead">
          <tr class="csg-table__body__thead__tr">
            <th>序号</th>
            <th v-for="(item, index) in tableHeaderList" :key="index">
              {{ item.label }}
            </th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableList" :key="index">
            <td>{{ index + 1 }}</td>
            <td v-for="(item, index) in tableHeaderList" :key="index">
              {{ getKeyValue(item.props) }}
            </td>
            <td class="csg-table__body__action">
              <csg-button
                :prefixIcon="'icon-zoom-in'"
                :size="'large'"
                type="primary"
                @click="handleClick(item,'view')"
                >查看</csg-button
              >
              <csg-button
                :prefixIcon="'icon-catalog'"
                :size="'large'"
                type="danger"
                @click="handleClick(item,'delete')"
                >删除</csg-button
              >
              <csg-button
                :prefixIcon="'icon-bianji'"
                :size="'large'"
                type="warning"
                @click="handleClick(item,'edit')"
                >修改</csg-button
              >
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <csg-pagination></csg-pagination>

  <csg-dialog v-model="modelValue" @confirm="confirm" :data="tableData" :title="title"></csg-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import csgDailog from '../csgDialog/index.vue';
import csgPagination from '../pagination/index.vue';
import server from '../csgAxios/index.js';
const modelValue = ref(false);

const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  tableList: {
    type: Array,
    default: () => [],
  },
});



const columsDataList = ref([]);
// 需要查询的列表
const searchDataList = ref([]);
const tableHeaderList = ref([]);
const tableBodyList = ref([]);
const tableData = ref([]);

const title= ref('操作提示');

const actionDirection = ref([
  { label: '查看', value: 'view'},
  { label: '编辑', value: 'edit'},
  { label: '删除', value: 'delete'},
  { label: '禁用', value: 'disable'},
  { label: '启用', value: 'enable'},
  { label: '重置密码', value: 'resetPwd'},
  { label: '授权', value: 'grant'},
  { label: '取消授权', value: 'cancelGrant'},
  { label: '导出', value: 'export'},
  { label: '导入', value: 'import'},
  { label: '新增', value: 'add'},
]);

const getKeyValue = (k) => {
  let result = null;
  props.tableList.forEach((item) => {
    for (const key in item) {
      if (key == k) {
        result = item[key];
      }
    }
  });
  return result;
};

onMounted(() => {
  // 获取到传递进来的数据 处理
  searchDataList.value = props.columns.filter((item, index) => item.isSearch);

  tableHeaderList.value = props.columns
    .filter((item) => item.show)
    
});

const confirm = () => {};

const showAdd = () => {
  modelValue.value = true;
  title.value = '新增';
};

const handleClick = (row: any,type: string) => {
  console.log(row);
  title.value = actionDirection.value.find(item => item.value === type).label
  tableData.value =  row
  modelValue.value = true;
};
</script>

<style lang="scss" scoped>
.csg-table {
  width: 100%;
  &__header {
    &__search {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &__cell {
        display: flex;
        align-items: center;
        color: red;
        margin: 10px;
      }
      &__action {
        width: 100px;
        font-size: 16px;
        margin: 0 10px;
      }
    }
  }
  &__use {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &__left {
      display: flex;
      align-items: center;
      &__cell {
        margin: 10px;
      }
    }
    &__right {
      display: flex;
      align-items: center;
      &__cell {
        margin: 10px;
      }
    }
  }
  &__body {
    overflow-x: auto;
    table {
      width: 100%;
      border-collapse: collapse;
      th,
      td {
        padding: 12px 16px;
        text-align: center;
        border-bottom: 1px solid #ebeef5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    &__thead {
      background-color: #f5f7fa;
      tr {
        background-color: #f5f7fa;
      }
      th {
        font-weight: 600;
        color: #303133;
      }
    }
    &__action {
      display: flex;
      justify-content: space-evenly;
    }
    tbody {
      tr:hover {
        background-color: #f5f7fa;
      }
    }
  }
  &__foot {
  }
}
</style>
t
